<template>
  <div class="resume-container">
    <!-- 个人信息部分 -->
    <section class="personal-info">
      <div class="avatar-container">
        <img src="https://avatars.githubusercontent.com/u/123456789" alt="个人头像" class="avatar" />
      </div>
      <div class="info-content">
        <div class="name-title">
          <h1>杨涛</h1>
          <p class="job-title">男 / 26 / 前端开发 / 5年经验</p>
        </div>
        <div class="contact-info">
          <div class="contact-item">
            <i class="fas fa-map-marker-alt"></i>
            <span>上海</span>
          </div>
          <div class="contact-item">
            <i class="fas fa-envelope"></i>
            <span>yang_tao@163.com</span>
          </div>
          <div class="contact-item">
            <i class="fas fa-phone"></i>
            <span>153****3403</span>
          </div>
          <div class="contact-item">
            <i class="fab fa-weixin"></i>
            <span>y_t_t_t_</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 个人简介 -->
    <section class="section-block">
      <h2>个人简介</h2>
      <div class="content">
        <!-- <p>5年前端开发经验，拥有 2B/2C 多个项目经验，拥有丰富的 React + TS 实践经验。积极参与行业内优秀前端技术框架开源共建，目前是 AntDesign 全球 48 名核心成员之一、ahooks 核心成员之一。乐于分享、对业界新技术保持高度敏感，喜欢钻研前沿技术和边缘设施，喜欢研究一些优秀框架的源码，有较强的技术判断力和业务敏锐度。</p> -->
        <p>5年前端开发专家，拥有丰富的2B/2C项目实战经验，主导开发过多个政府级数字化平台项目。精通Vue3+TypeScript技术栈，具备大型项目架构设计能力。技术社区活跃贡献者，掘金/CSDN技术博客总阅读量200W+，持续输出高质量技术文章。</p>
      </div>
    </section>

    <!-- 社交信息 -->
    <section class="section-block social-section">
      <h2>社交信息</h2>
      <div class="content">
        <div class="info-item">
          <span class="info-label"><i class="fab fa-github"></i> GitHub:</span>
          <a href="https://github.com/li-jia-nan" target="_blank">https://github.com/li-jia-nan</a>
        </div>
        <div class="info-item">
          <span class="info-label"><i class="fab fa-linkedin"></i> Linkedin:</span>
          <a href="https://www.linkedin.com/in/li-jia-nan" target="_blank">https://www.linkedin.com/in/li-jia-nan</a>
        </div>
        <div class="info-item">
          <span class="info-label"><i class="fas fa-book"></i> 掘 金:</span>
          <a href="https://juejin.cn/user/782508010775198/posts" target="_blank">https://juejin.cn/user/782508010775198/posts</a>
        </div>
      </div>
    </section>

    <!-- 教育经历 -->
    <section class="section-block">
      <h2>教育经历</h2>
      <div class="content">
        <div class="info-item">
          <span class="info-label">学校:</span>
          <span>某知名大学</span>
        </div>
        <div class="info-item">
          <span class="info-label">专业:</span>
          <span>计算机科学与技术</span>
        </div>
        <div class="info-item">
          <span class="info-label">学历:</span>
          <span>本科</span>
        </div>
        <div class="info-item">
          <span class="info-label">时间:</span>
          <span>2014-2018</span>
        </div>
      </div>
    </section>

    <!-- 技能特长 -->
    <section class="section-block">
      <h2>技能特长</h2>
      <div class="content">
        <div class="info-item">
          <span class="info-label">前端框架:</span>
          <span>React、Vue、TypeScript、Next.js、Webpack</span>
        </div>
        <div class="info-item">
          <span class="info-label">UI框架:</span>
          <span>Ant Design、Element Plus、TailwindCSS</span>
        </div>
        <div class="info-item">
          <span class="info-label">后端技术:</span>
          <span>Node.js、Express、NestJS</span>
        </div>
        <div class="info-item">
          <span class="info-label">数据库:</span>
          <span>MySQL、MongoDB、Redis</span>
        </div>
        <div class="info-item">
          <span class="info-label">开发工具:</span>
          <span>Git、VS Code、Docker</span>
        </div>
        <div class="info-item">
          <span class="info-label">测试工具:</span>
          <span>Jest、Cypress</span>
        </div>
      </div>
    </section>

    <!-- 项目经历 -->
    <section class="section-block">
      <h2>项目经历</h2>
      <div class="content">
        <div class="experience-block">
          <div class="info-item">
            <span class="info-label">项目名称:</span>
            <span>企业级中台项目</span>
          </div>
          <div class="info-item">
            <span class="info-label">开发时间:</span>
            <span>2022.01 - 2023.06</span>
          </div>
          <div class="info-item">
            <span class="info-label">主要工作:</span>
            <div class="work-details">
              - 负责企业级中台项目的架构设计和核心功能开发<br>
              - 使用 React + TypeScript + Ant Design 开发，引入微前端架构<br>
              - 实现了多个高性能组件，提升了 50% 的页面加载速度<br>
              - 设计并实现了团队通用组件库，提升开发效率 30%
            </div>
          </div>
        </div>

        <div class="experience-block">
          <div class="info-item">
            <span class="info-label">项目名称:</span>
            <span>电商平台重构项目</span>
          </div>
          <div class="info-item">
            <span class="info-label">开发时间:</span>
            <span>2021.03 - 2021.12</span>
          </div>
          <div class="info-item">
            <span class="info-label">主要工作:</span>
            <div class="work-details">
              - 主导电商平台从 Vue2 到 Vue3 的升级重构<br>
              - 使用 Vue3 + TypeScript + Vite 构建新版本<br>
              - 优化了首屏加载时间，从 3s 降低到 1.5s<br>
              - 实现了多端适配，支持 PC、H5、小程序等多端展示
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工作经历 -->
    <section class="section-block">
      <h2>工作经历</h2>
      <div class="content">
        <div class="experience-block">
          <div class="info-item">
            <span class="info-label">公司名称:</span>
            <span>某科技有限公司</span>
          </div>
          <div class="info-item">
            <span class="info-label">在职时间:</span>
            <span>2021.07 - 至今</span>
          </div>
          <div class="info-item">
            <span class="info-label">职位信息:</span>
            <span>高级前端开发工程师 | 技术部</span>
          </div>
          <div class="info-item">
            <span class="info-label">工作内容:</span>
            <div class="work-details">
              - 负责公司核心产品的前端架构设计和开发<br>
              - 带领团队完成多个重要项目的技术攻关<br>
              - 参与前端技术栈的选型和技术规范制定
            </div>
          </div>
        </div>

        <div class="experience-block">
          <div class="info-item">
            <span class="info-label">公司名称:</span>
            <span>某网络科技公司</span>
          </div>
          <div class="info-item">
            <span class="info-label">在职时间:</span>
            <span>2019.03 - 2021.06</span>
          </div>
          <div class="info-item">
            <span class="info-label">职位信息:</span>
            <span>前端开发工程师 | 产品研发部</span>
          </div>
          <div class="info-item">
            <span class="info-label">工作内容:</span>
            <div class="work-details">
              - 负责公司电商平台的前端开发工作<br>
              - 参与多个核心功能模块的设计与实现<br>
              - 优化前端性能，提升用户体验
            </div>
          </div>
        </div>

        <div class="experience-block">
          <div class="info-item">
            <span class="info-label">公司名称:</span>
            <span>某软件公司</span>
          </div>
          <div class="info-item">
            <span class="info-label">在职时间:</span>
            <span>2018.07 - 2019.02</span>
          </div>
          <div class="info-item">
            <span class="info-label">职位信息:</span>
            <span>初级前端开发工程师 | Web开发部</span>
          </div>
          <div class="info-item">
            <span class="info-label">工作内容:</span>
            <div class="work-details">
              - 参与公司官网和管理系统的开发维护<br>
              - 负责页面开发和功能实现<br>
              - 解决各种浏览器兼容性问题
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 致谢 -->
    <section class="section-block">
      <h2>致谢</h2>
      <div class="content">
        <p>感谢您花时间阅读我的简历，期待有机会能和您共事。</p>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// HomeView组件逻辑
</script>

<style scoped>
.resume-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 个人信息样式 */
.personal-info {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.avatar-container {
  flex-shrink: 0;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.name-title {
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 15px;
}

.info-content h1 {
  margin: 0;
  font-size: 28px;
  color: #2c3e50;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.job-title {
  color: #666;
  font-size: 16px;
  margin: 8px 0 0;
  font-weight: 500;
}

.contact-info {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  /* border: 2px solid red; */
  justify-content: center;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.contact-item i {
  color: #2c3e50;
  font-size: 16px;
  width: 16px;
  text-align: center;
}

/* 通用section样式 */
.section-block {
  /* border-top: 2px solid #000; */
  /* padding-top: 20px; */
  margin-bottom: 20px;
}

.section-block h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #000;
  text-align: left;
  border-bottom: 2px solid #000;
}

.content {
  color: #333;
  line-height: 1.6;
  text-align: left;
}

/* 通用信息项样式 */
.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.info-label {
  flex-shrink: 0;
  width: 80px;
  color: #000;
}

.info-item a {
  color: #1890ff;
  text-decoration: none;
  word-break: break-all;
}

.info-item a:hover {
  text-decoration: underline;
}

/* 经历块样式 */
.experience-block {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.experience-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.work-details {
  flex: 1;
  color: #666;
  padding-left: 0;
}

/* 致谢样式 */
.thanks .content {
  text-align: center;
  color: #666;
  font-style: italic;
}

@media (max-width: 768px) {
  .resume-container {
    padding: 20px;
  }

  .personal-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    gap: 20px;
  }

  .name-title {
    text-align: center;
  }

  .contact-info {
    justify-content: center;
  }

  .contact-item {
    justify-content: center;
  }

  .work-details {
    padding-left: 0;
  }
}

.social-section {
  /* border-top: 1px solid #000; */
}

.social-section .info-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  padding: 8px 0;
}

.social-section .info-item:last-child {
  border-bottom: none;
}

.social-section .info-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.social-section .info-label i {
  width: 16px;
  text-align: center;
}

.social-section a {
  color: #666;
}

.social-section a:hover {
  color: #1890ff;
}
</style>